<template>
  <div>
    <el-dialog title="添加机构" width="35%" direction="rtl" :wrapper-closable="false" :visible="visible" :before-close="handlerClose" :close-on-click-modal="false">
      <el-form ref="elForm" :model="elForm" :rules="rules" size="small" label-width="92px">
        <el-form-item label="选择机构" prop="school">
          <el-select
            v-model="elForm.school"
            multiple
            placeholder="请选择机构"
            clearable
            filterable
            remote
            :remote-method="search"
            :loading="loading"
            loading-text="正在搜索机构"
            no-data-text="无相关机构"
            @change="$emit('update:value', elForm.school)"
            @focus="eventFocus"
          >
            <el-option v-for="option in selectOptions" :key="option.id" :value="option.id" :label="option.title" />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" prop="term">
          <el-input v-model="elForm.term" placeholder="请输入有效期天数" clearable /><span class="date">天</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="choose-footer">
        <el-button size="small" @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary" size="small" @click="setSelect">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  inject: ['reload'],
  data() {
    return {
      confirmLoading: false,
      loading: false,
      elForm: {
        vid: this.$route.params.id,
        type: 1,
        school: undefined,
        term: undefined
      },
      selectOptions: [
        {
          value: this.value,
          title: ''
        }
      ],
      rules: {
        school: [
          {
            required: true,
            message: '请选择机构',
            trigger: 'blur'
          }
        ],
        term: [
          {
            required: true,
            message: '请输入有效期天数',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    eventFocus: function () {
      this.search();
    },
    // 搜索用户
    search: function (keyword) {
      this.loading = true;
      this.$http.get(
          '/course/admin/agent/' + this.$route.params.id + '/searchmhm',
          {
            keyword: keyword
          },
          (response) => {
            this.selectOptions = response.data;
            if (!keyword && this.selectOptions.length == 0) {
              this.$message.warning('暂无机构');
            }
            this.loading = false;
          },
          (_) => {
            this.selectOptions = [];
            this.$message.error('搜索机构失败，请重试');
            this.loading = false;
          },
          false
      );
    },
    handlerClose() {
      this.$emit('update:visible', false);
      this.$refs['elForm'].resetFields();
    },
    // 提交数据
    setSelect: function () {
      if (this.elForm.school == 1) {
        this.$message.warning('请选择非平台机构');
        return false;
      }
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.xUri = '/course/admin/agent/' + this.$route.params.id + '/syncvideo';
          this.confirmLoading = true;
          this.$http.post(
              this.xUri,
              {
                ...this.elForm
              },
              ({ msg }) => {
                this.$message.success(msg);
                this.confirmLoading = false;
                this.handlerClose();
                this.$emit('reload');
                this.reload();
              },
              ({ msg }) => {
                this.$message.error(msg);
                this.confirmLoading = false;
              }
          );
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.el-select,.el-input {
  width: 280px;
}
.date {
  margin-left: 10px;
}
</style>
